Update leaflet maplibre #320

kayarhabby · 2025-05-16T16:12:56Z

1 - Initialisation de la carte
2 - Gestion des controllers (FullScream, Dessin, Reset, Fichier, Navigation, Scale)
3 - Gestion des couches par groupe
4 - Gestion des couches d'objets et surbrillance

…carte maplibre et des controllers de base (fullscreen, navigation, scale)

…a classe d'initialisation

…eset sur la map

…rement impacté la classé, il est pour l'heure impossible de d'avoir les couches d'objets au niveau du controller

…de la carte

…ObjectsLayer, une fois la tuile changée la distance dessinée est cachée

… voir les couches d'objets qui posent problèmes

…her des données venant de source différent

…s données venant de source différent

…tion entre les overlays et selection de la première couche de base ajouté sur la carte

dtrucs · 2025-07-28T13:26:42Z

mapentity/settings.py

 _DEFAULT_MAP_STYLES = {
-    'detail': {'weight': 5, 'opacity': 1, 'color': 'yellow', 'arrowColor': '#FF5E00', 'arrowSize': 8},
-    'others': {'opacity': 0.9, 'fillOpacity': 0.7, 'color': 'yellow'},
+    'detail': {'weight': 5, 'opacity': 1, 'color': 'mediumpurple', 'arrowColor': '#FF5E00', 'arrowSize': 8},


Is it deliberate to change the color value?
And the opacity? (the line below)

yes but i forgot to remove it. It was for test purposes.

dtrucs · 2025-07-28T13:30:25Z

mapentity/static/mapentity/js/GeometryDataManager.js

+        const normalizedGeometries = geometries.map(geometry => {
+            return geometry;
+        });


What is the utility of this map loop?

I needed to merge all the geometries into a single geometry in order to construct the GeometryCollection object in the FileStore class.

I don't see any alteration in this Array.map, unless i miss something it seems useless

mapentity/static/mapentity/js/GeometryDataManager.js

dtrucs · 2025-07-28T13:33:50Z

mapentity/static/mapentity/js/MaplibreDrawControlManager.js

+class MaplibreDrawControlManager {
+    constructor(map, options = {}) {
+        this.map = map;
+        this.options = {...options};


Why not simply this.options = options?
Immutability issues?

Well, I had many problems with object references, so I decided to make a copy of each object instead of using references to solve the issue.

dtrucs · 2025-07-28T13:35:51Z

mapentity/static/mapentity/js/MaplibreDrawControlManager.js

+            controls: {
+                draw: {
+                    polygon: {
+                        title: 'Draw Polygon',


Is there a way to translate locales from geomanOptions?

I don't know, I haven't thought much about it. I can take a look and run some tests after I finish working on the view form in Geotrek-admin.

dtrucs · 2025-07-28T14:35:20Z

mapentity/static/mapentity/js/MaplibreMapentityContext.js

+                map.setZoom(context.mapview.zoom);
+                return true;
+            } else {
+                if (map !== null) {


Map could be null here, but not above?

It’s been there since the first version, so I left it as long as the code worked. I can refactor it further if needed

dtrucs · 2025-07-28T14:37:27Z

mapentity/static/mapentity/js/MaplibreMapentityContext.js

+                return true;
+            } else {
+                if (map !== null) {
+                    map.fitBounds(this.bounds, {padding : 0, maxZoom : 16}); // Adjust the map to fit the predefined bounds.


padding: 0 is necessary? It's not the default value?

It's the default value. Not necessary. I will remove it from the code.

dtrucs · 2025-07-28T14:39:55Z

mapentity/static/mapentity/js/MaplibreMapentityHelpers.js

+    function getURLParameter(name) {
+        var paramEncoded = (RegExp('[?|&]' + name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1],
+            paramDecoded = decodeURIComponent(paramEncoded);
+        if (typeof paramDecoded == 'string') {
+            try {
+                return JSON.parse(paramDecoded);
+            }
+            catch (e) {}
+        }
+        return paramDecoded;
+    }


Maybe you can use URLSearchParams api to get search params?

At first, I thought about it, but then everything started crashing and I didn’t know why. So I removed the URLSearchParams and reintegrated the old code that was already there and it worked perfectly, so I left it as is.

var paramEncoded = new URLSearchParams(location.search).get(name) should be fine, to be tested

I tried it, but it doesn't seem to work properly with the screenshot controller.

dtrucs · 2025-07-28T14:43:03Z

mapentity/static/mapentity/js/MaplibreMapentityHelpers.js

+     * @private
+     */
+    function generateUniqueId() {
+        return `${Math.random().toString(36).substring(2, 9)}`;


Suggested change

return `${Math.random().toString(36).substring(2, 9)}`;

return window.crypto.randomUUID()

Ok. I will try it then.

I'm mostly using Chrome for web development. Since window.crypto.randomUUID() wasn't working in my browser

window.crypto.randomUUID(); VM1024:1 Uncaught TypeError: window.crypto.randomUUID is not a function at <anonymous>:1:15

I added a fallback. I don't know if it's better or not let me know if I should leave it as is or just replace it with the older one.

function generateUniqueId() { if (window.crypto && typeof window.crypto.randomUUID === 'function') { return window.crypto.randomUUID(); } else { // fallback return generateFallbackUniqueID(); } } function generateFallbackUniqueID() { return `${Math.random().toString(36).substring(2, 9)}`; }

oh, this method only works in secure contexts (meaning under https url) so indeed a fallback could be useful for local testing without certificates

return window.crypto.randomUUID?.() || ${Math.random().toString(36).substring(2, 9)}`;

dtrucs · 2025-07-28T14:56:36Z

mapentity/static/mapentity/js/RelatedObjectLookups.js

+    // Unescape a string that was escaped using django.utils.html.escape.
+    text = text.replace(/&lt;/g, '<');
+    text = text.replace(/&gt;/g, '>');
+    text = text.replace(/&quot;/g, '"');
+    text = text.replace(/&#39;/g, "'");
+    text = text.replace(/&amp;/g, '&');
+    return text;


To be tested but something like this is maybe safer

return Object.assign(document.createElement('u'), { innerHTML: text }).textContent;

I haven’t modified this file, as it’s unrelated to the map functionality I’m currently working on.

kayarhabby added 30 commits April 30, 2025 14:45

update style

e8a9059

ajout des commentaires et réorganisation settings

74fbd23

mise en place d'un groupedLayerControl custom

b4b5230

mise en place d'une classe de base permettant l'initialisation de la …

bc50aca

…carte maplibre et des controllers de base (fullscreen, navigation, scale)

ajout de la carte maplibre de base dans base

12c1986

mise en place de Reset control, elle n'a pas encore été ajouté dans l…

357ec88

…a classe d'initialisation

update stylec

72f64af

add style-maplibre.css

9baa1a5

gestion du problème groupe controller switch et ajout du controller r…

f4a6e35

…eset sur la map

update base

aad91f8

add MeasureMaplibreControl

6334029

mise en place du controller de mesure

36909e5

ajout de commentaire

42282af

update (ajout de bounds et ResetMaplibreViewControl)

92ea031

update

2df50cb

ajout de nouveau script js

f2d982e

modifications des noms de fichiers de scripts maplibre

8f29e0b

update

a70ab9a

les modifications entreprit au niveau de maplibreObjectsLayer on sévè…

5393c46

…rement impacté la classé, il est pour l'heure impossible de d'avoir les couches d'objets au niveau du controller

Update

3f1ddbb

amélioration globale de la classe, ne gère plus que l'initialisation …

e4b3b29

…de la carte

modification du nom du fichier et au vu des changements dans Maplibre…

157831a

…ObjectsLayer, une fois la tuile changée la distance dessinée est cachée

modification du nom du fichier

a617b7c

reste à gerer la surbrillance, l'affichage des labels et certainement…

6754df6

… voir les couches d'objets qui posent problèmes

modification du nom de fichier

b7820cf

mise en commentaire de certains blocs de code

5888f83

ajout de nouveau fichier

cd2cf16

mise à jour du fichier, prise en compte du controller de fichier

3dc5859

mise en place de MaplibreFileLayerControl, permet entre autre d'affic…

1e99be1

…her des données venant de source différent

mise en place de MaplibreFileLoader, permet entre autre d'afficher de…

e25b0b1

…s données venant de source différent

kayarhabby added 24 commits July 12, 2025 22:38

Nettoyage du projet des fichiers leaflet

a6ab9e4

fix bug settings default_tiles

1e15fdb

ajout d'un nouvel event

6f270de

remise des jquery plugins

5d4e552

update base

e988616

centralisation de la gestion des couches dans MaplireLayerManager

a834488

gestion du controlleur de couche, suppression de la ligne de délimita…

b4da83f

…tion entre les overlays et selection de la première couche de base ajouté sur la carte

prise en compte de nameHTML et de la bonne categorie de l'objet

7bb2d2b

correction du bug de sélection de la première tuile de base

4a89221

add scroll

f433e40

update

040c835

update

c08ceee

update

775f28a

Mise en place du lazy loading des couches sur la carte

72082ef

update files

9dfe471

update layerController

ff6492f

update objectsLayer et mapentityMap

84fb525

update layer controller et style

48d8118

update layer controller

1a19509

gestion de la page détail

235c51b

update page widget

7062126

update style

a3b2325

update

0fe5178

update GeomtryField et DrawControl

5a3b336

dtrucs reviewed Jul 28, 2025

View reviewed changes

kayarhabby added 5 commits July 31, 2025 15:16

ajout de l'attribut modifiable et prise en compte de target_map

72afe1f

update avec prise en compte des modifications entrepries dans widget.py

90c2942

update js

c8feeca

update

c6c190c

update code after review

07aaa27

	return `${Math.random().toString(36).substring(2, 9)}`;
	return window.crypto.randomUUID()

Update leaflet maplibre #320

Are you sure you want to change the base?

Update leaflet maplibre #320

Uh oh!

Conversation

kayarhabby commented May 16, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants